<template>
  <div class="wrapper">
    <HeaderPart>
      商家部分
    </HeaderPart>
    <div class="shops">
      <p>我的店铺:</p>
      <ul v-for="item in shopList" :key="item.id">
        <li @click="toShopDetail(item.id)">
          <div class="shop">
            <img alt="图片未加载" :src="item.imgUrl">
            <div class="fonts">
              <p style="line-height: 20px; margin: 0">{{ item.name }}</p>
              <h4 style="line-height: 20px">{{ item.address }}</h4>
              <h4 style="line-height: 20px">{{ item.description }}</h4>
            </div>
          </div>
        </li>
      </ul>
      <el-button size="large" type="primary" @click="$router.push('/add-shop/' + id)"> 新建门店 </el-button>
    </div>
  </div>

</template>

<script setup>
import HeaderPart from "@/components/common/HeaderPart";
import {getShops} from "@/utils/api/ShopManager";
import {onBeforeMount, ref} from "vue";
import {useRouter} from "vue-router";
let { id } = JSON.parse(localStorage.getItem('businessInfo'))
// 将id变为整数
id = parseInt(id)
// 获得门店列表
const shopList = ref([])
onBeforeMount(async ()=>{
  const res = await getShops({id})
  shopList.value = res.data
  console.log(shopList.value)
})
// 去门店详情
const router = useRouter()
const toShopDetail = (id)=>{
  router.push('/shop-detail/' + id )
}


</script>

<style scoped>
.wrapper {
  height: 100vh;
  width: 100vw;
}
.shops {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
 }
.shops ul{
  list-style: none;
  padding-inline-start: 0;
}
.shops ul li {
  margin-bottom: 20px;
}
.shops ul li .shop {
  height: 100px;
  width: 100%;
  display: flex;
  /*background-color: #70BC46;*/
}
.shops ul li .shop .fonts {
  margin-left: 15px;
}
.shops ul li .shop img {
  width: 100px;
  height: 100px;
}
.shops p {
  font-size: 20px;
  font-weight: 700;
}

</style>